<template>
  <div class="body">
    <!-- 头部导航栏 -->
    <div class="header">
      <van-nav-bar
        title="订单界面"
        left-text="返回"
        left-arrow
        @click-left="goBack"
      />
    </div>
    <!-- 配送地址  订单详情  买家留言 -->
    <div class="bg">
      <!-- 配送地址 -->
      <van-cell size="large" title="配送地址" icon="location-o">
        <template #label>
          <!-- 如果后期加入默认地址 可在计算属性中进行筛选 进行显示 目前默认显示数组的第一个地址 -->
          <van-row>
            <van-col span="10">姓名:{{userInfo.realname}}</van-col>
            <van-col span="14">电话:{{userInfo.telephone}}</van-col>
          </van-row>
          <van-row>
            <van-col span="24">地址:{{userInfo.address}}</van-col>
          </van-row>
        </template>
      </van-cell>
      <!-- 订单详情 -->
      <van-cell size="large" title="订单详情" icon="coupon-o">
        <template #label>
          <van-row v-for="item of orderLines.values()" :key="item.productId" style="border-top:1px dotted #ededed">
            <van-col span="24">{{item.name}}</van-col>
            <van-col span="16">￥{{item.price}}</van-col>
            <van-col span="8">数量x{{item.num}}</van-col>
          </van-row>
          <van-row style="border-top:3px dotted #ededed">
            <van-col span="12">总计:￥{{total}}</van-col>
          </van-row>
        </template>
      </van-cell>
      <!-- 买家留言 -->
      <van-field
        v-model="message"
        rows="2"
        autosize
        label="留言"
        type="textarea"
        maxlength="50"
        placeholder="请输入留言"
        show-word-limit
      />
    </div>
    <!-- 提交按钮 -->
    <div class="buttomSub">
      <van-button type="primary" size="normal" @click="confirm" color="#7232dd" >提交订单</van-button>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapState, mapActions } from 'vuex';
import { Toast } from 'vant';
export default {
  data() {
    return {
      message:"",
    };
  },
  created(){
    // 执行   用户
    this.getUserInfo();
  },
  methods: {
    ...mapMutations('shopcar',['clearShopCar']),
    ...mapActions('user',['getUserInfo']),
    ...mapActions('order',['SubmitOrder']),
    // 返回上一页
    goBack() {
      this.$router.go(-1);
      // 等一秒清空
      setTimeout(()=>{
        this.clearShopCar()
      },1000)
    },
    // 提交订单
    confirm(){
      var obj = {
          customerId:this.userInfo.id,
          buyerMessage: this.message,
          orderLines:Array.from(this.orderLines.values())
      }
      console.log(obj);
      this.SubmitOrder(obj)
      .then((response)=>{
        // 提交订单后的判断
        if(response.data.message == '操作成功'){
            Toast('订单提交成功');
            // 路由跳转至订单页面
            this.$router.push({path:'/manager/order'})
            .then((res)=>{
                // 获取订单数据
            })
          }else{
            this.$notify({
              type:'danger',
              message:'订单提交失败'
            });
          }
      }),
      // 订单提交后清空购物车
      setTimeout(()=>{
        this.clearShopCar()
      },1000)
    }
  },
  
  computed: {
    ...mapState('shopcar',['orderLines']),
    ...mapGetters('shopcar',['total']),
    ...mapState('user',['userInfo']),
    
  }
};
</script>

<style scoped>
.van-cell {
  box-shadow: 1px 1px 1px 1px rgba(143, 66, 255, 0.4);
  width: 95%;
  border-radius: 5px;
  margin: 5px auto;
  padding: 5px;
  margin: 10px;
}
.van-button{
  border-radius: 15px;
  margin-left: 70%;
  margin-top: 50px;
}
</style>